<template>
  <div class="about">
     <!--搜索-->
        <el-row>
            <el-col :span="6"><el-input v-model="dname" size="mini" placeholder="请输入账号"></el-input></el-col>
            <el-col :span="6"><el-button type="primary" @click="search"  size="mini" icon="el-icon-search">搜索</el-button>
            &nbsp;<el-button type="primary"  size="mini" icon="el-icon-circle-plus" @click="handleAdd">添加</el-button></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light">&nbsp;</div></el-col>
        </el-row>
        <!--分页列表显示-->
        <el-row>
            <el-table
                    :data="tableData"
                    style="width: 100%"
                    height="430">
                   <el-table-column type="index" label="#" sortable> </el-table-column>
                <el-table-column prop="username" label="账号" width="106"> </el-table-column>
    
                <el-table-column prop="name" label="昵称"> </el-table-column>
                <el-table-column prop="headPic" label="头像">
                    <template slot-scope="scope" class="demo-image__preview">
                        <el-image
                                style="width: 50px; height: 50px"
                                :src="scope.row.headPic"
                                :preview-src-list="srcList">
                        </el-image>
                    </template>
                </el-table-column>
                  <el-table-column label="性别">
                <template slot-scope="scope">
                    {{ scope.row.sex == 0 ? '男':'女'}}
                </template>
                </el-table-column>
                <el-table-column prop="phoneNum" label="手机号"> </el-table-column>
                <el-table-column prop="accountBalance" label="账户余额"> </el-table-column>
                <el-table-column prop="integration" label="积分"> </el-table-column>
                <el-table-column prop="growth" label="成长值"> </el-table-column>
                <el-table-column prop="historyIntegration" label="历史积分数量"> </el-table-column>
                <el-table-column prop="LevelName" label="会员级别"> </el-table-column>
                <el-table-column prop="address" label="地址"> </el-table-column>
                <el-table-column prop="email" label="邮箱"> </el-table-column>
                <el-table-column prop="pathFront" label="正面证件照"> </el-table-column>
                <el-table-column prop="pathReverse" label="反面证件照"> </el-table-column>
                <el-table-column prop="licenseNo" label="驾照号"> </el-table-column>
                <el-table-column prop="token" label="token值"> </el-table-column>
                <el-table-column prop="status" label="状态">
                    <template slot-scope="scope">
                        <el-switch
                            v-model="scope.row.status"
                            @change='changeStatus($event,scope.row.status,scope.row.id)'
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            :active-value="1"
                            :inactive-value="0"
                            >
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="150">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <!-- <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <!--分页插件-->
        <el-row>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[2,3,5,10,100, 200, 300, 400]"
                    :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-row>
        <!--添加和更新 弹框-->
        <el-row>
            <el-dialog :title="title" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="会员客户ID" :label-width="formLabelWidth" v-if="isShow">
                        <el-input v-model="form.id" auto-complete="off" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="账号" >
                        <el-input v-model="form.username" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="证件类型" >
                        <el-input v-model="form.idType" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="证件正面" >
                        <el-input v-model="form.pathFront" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="证据反面" >
                        <el-input v-model="form.pathReverse" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="客户名字" >
                        <el-input v-model="form.name" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="联系人" >
                        <el-input v-model="form.contactName" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话" >
                        <el-input v-model="form.contactPhone" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="联系地址" >
                        <el-input v-model="form.contactAddress" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="驾照号" >
                        <el-input v-model="form.licenseNo" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" >
                        <el-input v-model="form.sex" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="电话" >
                        <el-input v-model="form.phoneNum" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="地址" >
                        <el-input v-model="form.address" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" >
                        <el-input v-model="form.email" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="会员级别" >
                        <el-input v-model="form.memberLevelId" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="账户余额" >
                        <el-input v-model="form.accountBalance" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="积分" >
                        <el-input v-model="form.integration" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="成长值" >
                        <el-input v-model="form.growth" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="历史积分数量" >
                        <el-input v-model="form.historyIntegration" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="微信返回ID" >
                        <el-input v-model="form.loc" auto-complete="openId"></el-input>
                    </el-form-item>
                    <el-form-item label="头像" >
                        <!-- <el-input v-model="form.headPic" auto-complete="off"></el-input> -->
                        <el-upload
                            class="avatar-uploader"
                            action="http://localhost:11930/api/cs/commonOSS/upload"
                            name="file"

                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar" width="150px" height="150px" style="border-radius:10px;">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addOrUpdate">确 定</el-button>
                </div>
            </el-dialog>
        </el-row>
  </div>
</template>
<script>
export default {
      data() {
        return {
               tableData:[],
                currentPage:1,//当前页面，默认1
                pageSize:2,//每页显示条数
                total:100,//分页总数量，默认值随便写，初始化时赋予新值
                dname:'',//查询功能
                loc:'',
                dialogFormVisible:false,
                title:'会员管理',
                form:{},
                srcList:[],
                imageUrl:'',
                isShow:true
        }
      },
       created:function(){
               //初始化
                this.loadData();
            },
            methods:{
                //加载数据
                loadData(){
                   //加载会员数据请求
                          this.$http.post("/api/mbs/member/queryAllMap?pageNo="+this.currentPage+"&pageSize="+this.pageSize,{
                                            username:this.dname
                                      }).then((response) => {
                                                 console.log(response);
                                              if(response.data.code==2000){
                                                  this.tableData = response.data.data.list;
                                                  this.total = response.data.data.total;
                                              }
                                })  
                        
                },
                 //会员账号状态开关改变
                changeStatus($event,num,memberId){
                        console.log(memberId);
                        console.log($event);
                        console.log(num);
                        //定义一个json数据
                        var jsons={  
                            id:memberId,
                            status:num
                        }
                        var _this = this;
                        
                        this.$http({
                            url:'/api/mbs/member/update',
                            method:'put',
                            data:jsons,
                            header:{
                                'Content-Type':'application/json'  //如果写成contentType会报错
                            }
                        })
                            .then(function (response) {
                                console.log("=========");
                                console.log(response);
                                if(response.data.code==2000){
                                    console.log("会员账号状态改变成功");
                                }else{
                                    console.log("会员账号状态改变失败");
                                }
                            })
                            .catch(function (error) {
                                //失败处理
                                console.log(error);
                                console.log("==========");
                            });
                    },
                //各种绑定事件方法
                //每页数量发生变化
                handleSizeChange(val) {
                    console.log(`每页 ${val} 条`);
                    this.pageSize=val;
                    this.loadData();
                   /* axios.get('/dept/page',{
                        params: {
                            pageNo: this.currentPage,
                            pageSize: this.pageSize
                        }
                    })
                        .then(function (response) {
                            //正确请求时，回调函数
                            console.log(response);
                            if(response.data.code==2000){
                                _this.tableData = response.data.data.pageDept;
                                _this.total = response.data.data.total;
                            }
                        })
                        .catch(function (error) {
                            //失败处理
                            console.log(error);
                        });*/
                },
                //当前页发生变化
                handleCurrentChange(val) {
                    console.log(`当前页: ${val}`);
                    this.currentPage=val;
                    this.loadData();
                    /*axios.get('/dept/page',{
                        params: {
                            pageNo: this.currentPage,
                            pageSize:this.pageSize
                        }
                    })
                        .then(function (response) {
                            //正确请求时，回调函数
                            console.log(response);
                            if(response.data.code==2000){
                                _this.tableData = response.data.data.pageDept;
                                _this.total = response.data.data.total;
                            }
                        })
                        .catch(function (error) {
                            //失败处理
                            console.log(error);
                        });*/
                },
                //查询方法
                search(){
                   this.loadData();
                },
                //处理添加
                handleAdd(){
                    //清空原来form
                    this.form={};
                    //更新显示名称
                    this.title="部门添加";
                    //对话框显示
                    this.dialogFormVisible=true;
                },
                //处理编辑（弹出部门更新对话框）
                handleEdit(index, row) {
                    console.log(index, row);
                    //{deptNo:10,dname:'ACCOUNTING',loc:'纽约'}
                    this.form=row;
                    this.imageUrl=row.headPic;
                    //更新显示名称
                    this.title="部门更新";
                    //对话框显示
                    this.dialogFormVisible=true;
                },

                //提交表单数据（添加或者更新）
                addOrUpdate(){
                    var  url ='/api/mbs/member/update';
                    if(this.form.id==''||this.form.id==null){
                        url="/api/mbs/member/insert"
                    }
                    var _this=this;
                    //提交方法
                    this.$http.post(url, this.form)
                        .then(function (response) {
                            console.log(response);
                            //提交成功
                            if(response.data.code==2000){
                                //关闭弹出框
                                _this.dialogFormVisible=false;
                                //提示更新成功
                                _this.$message({
                                  //  message: '恭喜你，这是一条成功消息',
                                    message: response.data.message,
                                    type: 'success'
                                });
                                //重新加载数据
                                _this.loadData();
                            }else {
                                _this.$message.error(response.data.message);
                            }
                        })
                        .catch(function (error) {
                            _this.$message.error('错了哦，这是一条错误消息');
                        });
                },
                //处理删除（ 部门删除）
                handleDelete(index, row) {
                    console.log(index, row);
                    var _this=this;
                    //确认弹框
                    this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        //执行删除
                        axios.delete('/dept/delete?deptNo='+row.deptNo)
                            .then(function (response) {
                                //判断删除是否成功
                                 if(response.data.code==2000){
                                     //提示
                                     _this.$message({
                                         type: 'success',
                                         message: '删除成功!'
                                     });
                                     //重新加载数据
                                     _this.loadData();
                                 }else {
                                     _this.$message.error(response.data.message);
                                 }
                            })
                            .catch(function (error) {
                                //失败处理
                                console.log(error);
                                _this.$message.error('删除失败!');
                            });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });


                },
                 //头像上传成功之后的处理
              handleAvatarSuccess(res,file){
                  this.imageUrl=URL.createObjectURL(file.raw);
                  console.log("返回值-》名称："+file.response.oldFileName
                  +"新路径："+file.response.filePath);
                  console.log(file.response);
                  this.form.headPic=file.response.ossFileUrlBoot;
              },
              //图片上传之前的处理
              beforeAvatarUpload(file) {
                  // const isJPG = file.type === 'image/jpeg';
                  //file.size 上传图片的大小，单位为字节
                  const isLt5M = file.size / 1024 / 1024 < 5;

                  // if (!isJPG) {
                  //     this.$message.error('上传头像图片只能是 JPG 格式!');
                  // }
                  if (!isLt5M) {
                      this.$message.error('上传头像图片大小不能超过 5MB!');
                  }
                  return isLt5M;
              }
            }
    }
</script>
<style>

</style>
